<template>
  <div>
    <div id="bill">
      <img src="@/assets/topimg.png" alt="" @click="to_chaxun"/>
      <div id="inquire">
        <a href="#" @click="fun()">点击查看账单·分期·还款</a>
      </div>
    </div>
    <div id="classify">
      <div id="content" @click="funB()">
        <span class="iconfont">&#xe65d;</span>
        <i>卡服务</i>
      </div>
      <div id="content" @click="funD()">
        <span class="iconfont">&#xe65d;</span>
        <i>卡优惠</i>
      </div>
      <div id="content" @click="funC()">
        <span class="iconfont">&#xe65d;</span>
        <i>信用卡包</i>
      </div>
      <div id="content" @click="funE()">
        <span class="iconfont">&#xe65d;</span>
        <i>龙卡优惠</i>
      </div>
    </div>
    <div id="banner">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
          id="swipe"
        >
          <img :src="image.lcimage"/>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import {banner_get} from "@/apis/card";
import {car_xinxi} from "@/apis/user";

export default {
  data() {
    return {
      images: [],
      username:localStorage.token,
    };
  },
  methods: {
    fun() {
      this.$router.push("/transact");
    },
    funB() {
      this.$router.push("/fenlei");
    },
    funC() {
      this.$router.push("/kabao");
    },
    funD() {
      this.$router.push("/youhui");
    },
    funE() {
      this.$router.push("/longka");
    },
    to_chaxun(){
      car_xinxi({username:this.username}).then((res)=>{
        console.log(res)
        if(res.data.data.tbAccount.accountCard){
          console.log(res)
          localStorage.setItem("id",res.data.data.userId)
          this.$router.push('/chaxun')
        }
      })
    }
  },
  created() {
    banner_get().then((ok)=>{
      this.images=ok.data.data;
    })
  }
};
</script>

<style lang="scss" scoped>
// fontsize 图标
@font-face {
  font-family: "iconfont";
  src: url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("woff2"),
    url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("woff"),
    url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 0.16rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// Swipe轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.5rem;
  text-align: center;
  // background-color: #39a9ed;
}

// 内容样式
#bill {
  width: 3.43rem;
  height: 1.27rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #136ab7;
  margin: 0 auto;
  border-radius: 0.06rem;
  position: relative;
  margin-bottom: 0.3rem;
  img {
    width: 0.96rem;
  }
  // 头部图片
  #inquire {
    width: 3.13rem;
    height: 0.5rem;
    border-radius: 0.05rem;
    border: 0.01rem solid #e4e4e4;
    background: #fff;
    position: absolute;
    margin: 0 auto;
    bottom: -0.25rem;
    text-align: center;
    line-height: 0.5rem;
    font-weight: 700;
    a {
      font-size: 0.14rem;
      color: #3676bc;
    }
  }
}
// 卡分类
#classify {
  width: 100%;
  height: 0.95rem;
  display: flex;
  justify-content: space-between;
}
#content {
  width: 0.62rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span {
    font-size: 0.22rem;
  }
  i {
    font-size: 0.12rem;
    margin-top: 0.12rem;
  }
}
// 轮播图
#banner {
  width: 3.43rem;
  height: 0.8rem;
  overflow: hidden;
  margin-bottom: 0.1rem;
  #swipe {
    width: 100%;
    height: 0.8rem;
    float: left;
    img {
      width: 3.43rem;
      height: 0.8rem;
      z-index: 9999;
    }
  }
}
</style>